<ion-view view-title="宿舍管理">
    <ion-nav-buttons side="right">
        <a class="button button-clear" on-tap="vm.collect.logout()">退出</a>
    </ion-nav-buttons>
    <ion-content class="tab-background">

        <div class="sel">

            <select ng-model="vm.collect.selected"
                    ng-change="vm.collect.Changed()"
                    ng-options="r.departName for r in vm.collect.List" class="first_select">
            </select>
        </div>
        <div class="main sou" ng-class="{ch:vm.collect.ch}" id="sou">
           <div class="num">
               <div class="all-num" >
                   <!--<div class="jz">-->
                   <div class="til">住宿总人数</div>
                   <div class="inf">{{vm.collect.data.allLodgerCount}}人</div>
                   <!--</div>-->
               </div>
           </div>
            <table ><tbody>
            <!--<table rules="all"><tbody>-->
            <tr class="han1">
                <td class="shu1">
                    <img src="images/si.png" />
                    <div class="til">宿舍楼总数</div>
                    <div class="inf">{{vm.collect.data.allDormCount}}栋</div>
                </td>
                <td>
                    <img src="images/s2.png" />
                    <div class="til">房间总数</div>
                    <div class="inf">{{vm.collect.data.allRoomCount}}间</div>
                </td>
            </tr>
            <tr>
                <td class="shu1">
                    <img src="images/s3.png" />
                    <div class="til">床位总数</div>
                    <div class="inf">{{vm.collect.data.allBedCount}}个</div>
                </td>
                <td>
                    <img src="images/s4.png" />
                    <div class="til">空床位总数</div>
                    <div class="inf">{{vm.collect.data.freeBedCount}}个</div>
                </td>
            </tr>
            </tbody></table>
            <div class="chart sy-chart" ng-if="vm.collect.display" >
                <div class="tjt" id="sy" style="width: 100%;" >

                </div>

                <div class="chart-title">各学院宿舍床位情况</div>
            </div>


        </div >
        <div class="main xyzl" ng-class="{ch:vm.collect.ch}">
            <div class="all-num">
                <!--<div class="jz">-->
                <div class="til">可控人数</div>
                <div class="inf">{{vm.collect.departStat.bedCount}}人</div>
                <!--</div>-->
            </div>
            <table rules="all"><tbody>

            <tr>
                <td>
                    <img src="images/s3.png" />
                    <div class="til">已用床位</div>
                    <div class="inf">{{vm.collect.departStat.allLodgerCount}}个</div>
                </td>
                <td>
                    <img src="images/s4.png" />
                    <div class="til">空床位总数</div>
                    <div class="inf">{{vm.collect.departStat.freeBedCount}}个</div>
                </td>
            </tr>
            </tbody></table>
            <div class="tjt" >

                <div class="swiper-container" >
                    <div class="swiper-wrapper" >
                        <div class="swiper-slide"  style="width: 100%;height: 100%;position: relative;">
                            <div id="fir" style="width: 100%;height: 100%;"></div>
                            <!--<div class="btnwz" ng-class="{xs:vm.collect.xs}">各年级人数比例</div>-->
                        </div>
                        <div class="swiper-slide"  style="width: 100%;height: 100%;">
                            <div id="sen" style="width: 100%;height: 100%;"></div>
                            <!--<div class="btnwz" ng-class="{xs:vm.collect.xs}">男女人数比例</div>-->
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
        <div class="main">
            <a class="qk" ng-repeat="x in vm.collect.dormStat" on-tap="vm.collect.getDormId(x.dormId,x.dormName)">
                <div class="xq">{{x.dormName}}详情</div>
                <div class="xq-info">
                    <div class="kuai">
                        <div class="kuai-num">{{x.dormAllBedCount}}个</div>
                        <div class="kuai-tile">共有床位</div>
                    </div>
                    <div class="kuai">
                        <div class="kuai-num">{{x.dormFreeCount}}个</div>
                        <div class="kuai-tile">空置床位</div>
                    </div>
                    <div class="kuai">
                        <div class="kuai-num">{{((x.dormFreeCount/x.dormAllBedCount)*100).toFixed(1)}}%</div>
                        <div class="kuai-tile">空置率</div>
                    </div>
                </div>
            </a>
        </div>



    </ion-content>
</ion-view>